<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js"></script>
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>

    <style>
        body{
            background-image: url("image/image_backgrang.png");
            background-size: contain;
        }
   #beijin_div{
       background-color: #00F7DE;
       background-image: url("image/image_backgrang.png");
       opacity: 0.7;
       background-size: contain;
       width: 500px;
       height: 400px;
       margin: 150px auto;
       position: relative;
   }
        #image_div{
            background-image: url("image/logo.png");
            width: 100px;
            height: 195px;
            background-size: contain;
            float: left;
            position: absolute;
            top: 25%;
            margin-left: 40px;
        }
        #kuang_div{
            float: right;
            position: absolute;
            top: 25%;
            margin-left: 55px;
        }
    </style>

</head>

<body>
<div id="beijin_div">
<div id="image_div"></div>
<div class="layui-form" id="kuang_div" lay-filter="example" style="width: 400px;">
    <div class="layui-form-item">
<!--        <label class="layui-form-label">输入框</label>-->
        <div class="layui-input-block">
            <input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
<!--        <label class="layui-form-label">密码框</label>-->
        <div class="layui-input-block">
            <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <div id="your-dom-id" class="nc-container"></div> <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->

            <script type="text/javascript">
                var $ = layui.jquery;//使用了layui的jQuery
                var nc_token = ["FFFF0N000000000093A3", (new Date()).getTime(), Math.random()].join(':');
                var NC_Opt =
                    {
                        renderTo: "#your-dom-id",
                        appkey: "FFFF0N000000000093A3",
                        scene: "nc_login",
                        token: nc_token,
                        customWidth: 290,
                        trans:{"key1":"code0"},
                        elementID: ["usernameID"],
                        is_Opt: 0,
                        language: "cn",
                        isEnabled: true,
                        timeout: 3000,
                        times:5,
                        apimap: {
                            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                            // 'get_captcha': '//b.com/get_captcha/ver3',
                            // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                            // 'get_img': '//c.com/get_img',
                            // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                            // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                            // 'umid_serUrl': 'https://g.com/service/um.json'
                        },
                        callback: function (data) {
                            //通过验证时恢复按钮
                          $("#loginBtn").attr("disabled",false);
                          $("#loginBtn").removeClass("layui-btn-disabled");

                          // button点击事件
                            $("button#loginBtn").click(function (){
                                $.ajax({
                                    url:"/admin"    // 访问根路径下的login (最终被tomcat映射为LoginServlet
                                    ,headers:{"method":"login"}
                                    ,type:"post"
                                    ,dataType:"json"
                                    ,data: {
                                        "phone":$("input[name=phone]").val(),
                                        "pwd":$("input[name=pwd]").val(),
                                    }
                                    ,success:function(result){   // result就是服务器响应之后返回的数据
                                        console.log("code:"+result.code);
                                        // console.log(result.data.name);
                                        // 获取返回状态为1表示登录成功
                                        if(result.code == 1) {
                                            //下面是两种弹窗的方法
                                            // layer.msg(result.msg);
                                            alert(result.msg);
                                            window.localStorage.setItem("auth",$("input[name=phone]").val());
                                            // alert("登录成功")
                                            location.href="home.html";  // js的方法(加window)
                                        }else {
                                            // alert("登录失败")
                                            alert(result.msg);
                                        }

                                    }
                                    ,error:function(e){
                                        console.log(e)
                                    }
                                })
                            })
                        }
                    }
                var nc = new noCaptcha(NC_Opt)
                nc.upLang('cn', {
                    _startTEXT: "请按住滑块，拖动到最右边",
                    _yesTEXT: "验证通过",
                    _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
                    _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
                })
            </script>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" id="loginBtn" disabled="disabled"  class="layui-btn layui-btn-disabled layui-btn-fluid" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</div>

</div>
</body>
</html>